For Graphics - JavaScript

Show them Xmas slides in Processing
Then same in JavaScript

HTML+JS has the advantage that it is web-based,
so web-access is faster and more reliable than Processing,
and supports more features.

JS is Event Driven - no Draw loop.
Also Object Oriented - we will use OBJECTS to be clickable,
rather than worrying about mouseX and mouseY.

Get started early with GUI elements - buttons, etc.

Need to find an appropriate library.
Don't really need HTML Canvas
support, as we've done enough drawing.
Stick to pictures.

Would be good to figure out how to control videos.

Use KOMODO for editing.
And it has a nice Macro tool
Simple, no surprises, good pop-up syntax completion

My Samples


https://dl.dropbox.com/u/239179/graphics/javascript/html4test.html

Windows 8 Pic Live Tiles Patent Lawsuit Organizing Tiles

Color Picker

EZJS


lesson3

My Tutorials



Churchill Clickable Pics PDF Win8tiles

HTML 5


Notes and Tutorials

HTML 5 Overview HTML 5 Cheat Sheet Canvas Cheat Sheet

HTML5 Games Dive Into HTML5 Slider

30 HTML 5 Tutorials CSS Style Properties

Animation VIDEO Tutor

Javascript Video Tutorial Beginners
Eloquent Javascript
Thorough JS Notes - organized

CAMERAS

Bigshot DIY

Movies
mp4 and m4v
Free background music
Add music in iMovie

Digital Signatures
BitCoint Techy
Text Boxes :
http://www.techrepublic.com/blog/webmaster/html5-drawing-images-and-adding-text-to-the-canvas-element/586

Tutorial
http://sixrevisions.com/html/canvas-element/

Canvas Basic Intro
http://www.onlywebpro.com/2011/06/25/html5-canvas-for-absolute-beginners-part-1/

Online Tutorial + Framework JCOTTON
http://jcotton.sourceforge.net/tutorials.htm

Paper.js - framework + tutorial + reference
http://paperjs.org/

Tutorial Videos
http://www.developphp.com/view.php?tid=1262

Pretty Drawing Tutorial with Good Reference
http://www.html5canvastutorials.com/

Reference Tutorial
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-crop/

IMAGE problems Images must be PRELOADED, otherwise canvasImage will not draw the image
the first time, but rather the second time it executes.
Using a normal <img> works better, but images stretch or shrink automatically,
and you can only put the image in the box - no text or drawings.

Examples


Asteroids

GOOGLE DRIVE (DOCS)

Drawing Intro Tutorial**
http://www.youtube.com/watch?v=gQng2kJ-N9k

====================================
Freeware for 2013-14 (Macs)

  • Web-pages = SeaMonkey . . . BlueGriffon . . . Komodo . . . Firefox
    . . . . . .. . . . QuickNEasy WebBuilder (20 USD)

  • Java = BlueJ (IB) . . . . Processing (Graphics+IB) . . . . NetBeans (IB2) . . . . JDK

  • Graphics = GIMP . . . . Inkscape . . . . Jing . . . . QuickTime . . . Skitch (+Evernote)

  • Office = LibreOffice

  • Math = Geogebra

  • Online = Dropbox . . . . WIX . . . . Haiku . . . . GoogleDocs . . . . Weebly?
    . . . . . . jsfiddle.net . . jsbin.com !! . . . Google Sites (adventure game)

  • Tools = Task Manager .. . Transfer on LAN . . . Hex Editor (DataWorkshop)



Haiku Links

IB12 https://fis.haikulearning.com/upper/ib-computerscience/prva/cms_page/view/5779364
IB 11 https://fis.haikulearning.com/upper/ib-computerscience/prva/cms_page/view/5779352

CT https://fis.haikulearning.com/upper/gr09-12computertechnology/cms_page/view
GR https://fis.haikulearning.com/upper/gr10-12-graphicsprogramming/cms_page/view

IB Quick Start page
http://fiscomp.weebly.com/ib-comp-sci-intro.html

GRAPHICS

SetTimeout --> Rube Goldberg machines (or whatever they call those connection machines)

https://www.youtube.com/watch?v=cVgcmmS0W3Q

jeffutecht.com/fis

Computational Thinking


CT What and Why - Wing 2010
Purdue CT Every Day Examples
CR For Everyone - Overview for Edu
Google CT Lessons
CT Critical for k-12
Measuring CT Concepts
Time to Reload - London Knowledge Lab
CT For Youth - Development Plan
CT in Teacher Training
CT WebQuest
Embed CT in STEM Lessons
Microsoft CT Links
eLearning Gizmos
NMC Horizon Report
CT Gaming Concepts
NW Uni Stem CT
Embed CT in STEM
Digital Wisdom

TSP
TSP Applet
TSP in Wired
TSP Movie
Europe Simulation
p vs np Video
RSA Factor Challenge

Using Sci Fi for CompSci


CompSci and CompThinkin Schools

Bring Comp Think to Schools
IB NOTES

Circuits IGCSE

Nature of Code(simulations Processing)

Basic Comp Sci Notes

Antitrust Movie

Defining Computer Science

CIRCUITS
Circuit Simulator
Pippin CPU Simulator(1 acc)
Multi-Register CPU Simulator
AEonline Circuit Sim
Fetch-Decode-Execute-Store Video
Motherboard and Expansion
How Computers work in 20 min

CT Year End Ideas

Paper folding . . . sploder.com . . . . egreeting cards . . . . Linux (games)
3D - Stereograms - Alice - Sketchup
Ascii Art Make a Logo Morphing Photo Mosaic
Watch videos, Treasure Hunt
Downloading - like Wikipedia, CD Images
Recording CD's
GameSalad.com

Tools -

Encryption, Compression, Disk clean-up, Steganography
Tiny writing hidden in pictures, printing resolution
MP3 compression levels (need headphones)
Digital Rights Management

VIDEOS
Awesome Facts

CT April Ideas

Wiki
Biography
Better Bulletin
Hypercard , Supercard?
http://hypercard.org/
OS Emulations -
http://www.makeuseof.com/tag/4-classic-operating-systems-can-access-browser/#twitter

LIVECODE -
http://livecode.com/